<template>
	<view>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/qweather-icons@1.3.0/font/qweather-icons.css">
		<view class="box">
			<view class="top">
				<view class="name">
					{{name}}
				</view>
				<view class="img">
					<i :class="icon" style="font-size: 130rpx;"></i>
				</view>
				<view class="weather-tem">
					<span class="tem">{{temperature}}°</span>
					<br />
					<span class="weather">{{now_weather}}</span>
				</view>
			</view>
			<view class="body">
				<view class="weather-state">
					今天{{now_weather}}，温度和昨天差不多，现在{{temperature}}°，空气{{air_state}}
				</view>
				<view class="rain">
					{{rain_state}}
				</view>
				<view class="suntime">
					<text>日出：{{sunrise}} - 日落：{{sunset}}</text>
				</view>
			</view>
			<view class="footer">
				<view class="footer-box">
					<view class="wind">
						{{wind}} {{windLevel}}级 {{windSpeed}}km/h
					</view>
					<uni-table class="table-box">
						<uni-tr>
							<uni-td>
								<span class="smallTitle">湿度:</span>
								<span class="bigTitle">{{humidity}}%</span>

							</uni-td>
							<uni-td>
								<span class="smallTitle">紫外线:</span>
								<span class="bigTitle">{{ray}}</span>

							</uni-td>
						</uni-tr>
						<uni-tr>
							<uni-td>
								<span class="smallTitle">体感温度:</span>
								<span class="bigTitle">{{body_tem}}°</span>

							</uni-td>
							<uni-td>
								<span class="smallTitle">能见度:</span>
								<span class="bigTitle">{{see}}km</span>

							</uni-td>
						</uni-tr>
						<uni-tr>
							<uni-td>
								<span class="smallTitle">降水量:</span>
								<span class="bigTitle">{{Precipitation }}mm</span>

							</uni-td>
							<uni-td>
								<span class="smallTitle">大气压:</span>
								<span class="bigTitle">{{atmos}}pha</span>

							</uni-td>
						</uni-tr>
					</uni-table>
					<view class="air-quality">
						AQI {{aqi}} {{category}}
					</view>
					<uni-table class="table-box air-box">
						<uni-tr>
							<uni-td>
								<span class="smallTitle">PM2.5: </span>
								<span class="bigTitle">{{pm2p5}}</span>

							</uni-td>
							<uni-td>
								<span class="smallTitle">PM10: </span>
								<span class="bigTitle">{{pm10}}</span>

							</uni-td>
						</uni-tr>
						<uni-tr>
							<uni-td>
								<span class="smallTitle">O₃:</span>
								<span class="bigTitle">{{o3 }}</span>

							</uni-td>
							<uni-td>
								<span class="smallTitle">CO:</span>
								<span class="bigTitle">{{co }}</span>

							</uni-td>
						</uni-tr>
						<uni-tr>
							<uni-td>
								<span class="smallTitle">SO₂:</span>
								<span class="bigTitle">{{so2 }}</span>

							</uni-td>
							<uni-td>
								<span class="smallTitle">NO₂:</span>
								<span class="bigTitle">{{no2 }}</span>

							</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		cityWeather
	} from "@/utils/api.js"
	import {
		cityAir
	} from "@/utils/api.js"
	import {
		rainState
	} from "@/utils/api.js"

	import {
		future
	} from "@/utils/api.js"
	import {
		uvIndex
	} from "@/utils/api.js"
	import {
		citySeach
	} from "@/utils/api.js"


	export default {
		name: "weatherBody",
		props: {
			position: {
				type: String,
				default: "101010100"
			},
			location: {
				type: Array,
				default: []
			}

		},
		data() {
			return {
				icon: "",
				temperature: 27,
				now_weather: "多云",
				air_state: "不错",
				rain_state: "无降水",
				humidity: 19,
				ray: "中等",
				body_tem: 25,
				see: 17,
				Precipitation: 1,
				atmos: 1009,
				wind: "东风",
				windLevel: 1,
				windSpeed: 10,
				aqi: 10,
				sunrise: '',
				sunset: '',
				category: '',
				pm2p5: "",
				pm10: "",
				o3: "",
				co: "",
				so2: "",
				no2: "",
				name: ""
			};
		},
		watch: {
			position(newValue) {
				this.weatherData(newValue)
				this.airData(newValue)
				this.sunTime(newValue)
				this.uvData(newValue)
				this.city(newValue)

			},
			location(newValue) {
				this.rainData(newValue)
			}
		},
		methods: {
			//获取降水情况
			async rainData(locationArray) {
				let location = locationArray.join(",")
				let res = await rainState({
					location: location,
					key: "2d5557cc8feb46749ee7b458cc0d2e3a",
				});
				this.rain_state = res.summary
			},
			//获取天气数据
			async weatherData(position) {
				console.log("weatherData触发")
				let res = await cityWeather({
					location: position ? position : 101010100,
					key: "2d5557cc8feb46749ee7b458cc0d2e3a",
				});
				this.now_weather = res.now.text
				this.temperature = res.now.temp
				this.body_tem = res.now.feelsLike
				this.body_tem = res.now.feelsLike
				this.wind = res.now.windDir
				this.windLevel = res.now.windScale
				this.windSpeed = res.now.windSpeed
				this.humidity = res.now.humidity
				this.see = res.now.vis
				this.Precipitation = res.now.precip
				this.atmos = res.now.pressure
				this.humidity = res.now.humidity
				this.humidity = res.now.humidity
				this.icon = "qi-" + res.now.icon
				// console.log(res);
			},
			//获取空气各项数据
			async airData(position) {
				console.log("airData触发")
				let res = await cityAir({
					location: position ? position : 101010100,
					key: "2d5557cc8feb46749ee7b458cc0d2e3a",
				});
				this.aqi = res.now.aqi
				this.category = res.now.category
				this.air_state = res.now.category
				this.co = res.now.co
				this.no2 = res.now.no2
				this.o3 = res.now.o3
				this.pm2p5 = res.now.pm2p5
				this.pm10 = res.now.pm10
				this.so2 = res.now.so2
			},
			//获取日出日落时间
			async sunTime(position) {
				console.log("sunTime触发");
				let res = await future({
					location: position ? position : 101010100,
					key: "2d5557cc8feb46749ee7b458cc0d2e3a",
				});
				// console.log(res);
				this.sunrise = res.daily[0].sunrise
				this.sunset = res.daily[0].sunset

			},
			//获取紫外线等级
			async uvData(position) {
				console.log("uvData触发");
				let res = await uvIndex({
					type: 5,
					location: position ? position : 101010100,
					key: "2d5557cc8feb46749ee7b458cc0d2e3a",
				});

				this.ray = res.daily[0].category
				// console.log(res);
			},
			//获取城市名字
			async city(position) {
				let res = await citySeach({
					location: position ? position : 101010100,
					key: "2d5557cc8feb46749ee7b458cc0d2e3a"
				});
				this.name = res.location[0].name
			}
		}
	}
</script>

<style lang="scss">
	.box {
		background: linear-gradient(-145deg, rgba(164, 204, 255, 0.5), rgba(255, 222, 254, 0.5), rgba(255, 228, 179, 0.5));

		margin: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;

		.top {
			height: 200rpx;
			// padding: 20rpx 0rpx;
			position: relative;
			margin-bottom: 30rpx;
			overflow: hidden;

			.name {
				position: absolute;
				left: 140rpx;
				top: 70rpx;
				writing-mode: vertical-rl;
				display: inline;
				// line-height: ;
				// margin-left: 40rpx;
				font-size: 50rpx;
				font-weight: 500;
				color: #2f2f2f;
				letter-spacing: 0.3em;
			}

			.img {
				position: absolute;
				left: 340rpx;
				top: 30rpx;
				float: left;
				color: #545454;

			}

			.weather-tem {
				margin: 30rpx;
				position: absolute;
				top: 50rpx;
				left: 450rpx;


				.tem {
					font-size: 50rpx;
					// font-weight: 600;
				}
			}


		}

		.body {
			text-align: center;

			.weather-state {
				margin-bottom: 40rpx;
				font-size: 25rpx;
				color: #484848;
			}

			.rain {
				margin-bottom: 30rpx;


				color: #484848;
			}

			.suntime {
				margin-bottom: 30rpx;
				padding: 0 120rpx;
				color: #484848;
			}
		}

		.footer {
			.footer-box {
				margin: 20rpx;
				background: rgba(210, 206, 255, 0.3);
				border-radius: 20rpx;
				padding: 30rpx;
				overflow: hidden;

				.wind,
				.air-quality {
					float: left;
					font-size: 30rpx;
					color: #3e3e3e;
					margin: 20rpx;
				}

				.air-quality {
					text-align: center;
					height: 45rpx;
				}

				.air-box,
				.table-box {
					.smallTitle {
						margin-right: 15rpx;
						font-size: 30rpx;
					}
				}

			}
		}
	}
</style>